* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  height: 100%;
  font-size: 14px;
}
body {
  height: 100%;
  color: #333;
  min-width: 1240px;
  font: 14px/1.4 Helvetica Neue, Helvetica, Arial, Microsoft Yahei,
    Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
}
a {
  color: #66b1ff;
  text-decoration: underline;
  outline: none;
}
i {
  font-style: normal;
}
/* input[type="text"], */
input[type="search"],
input[type="password"],
input[type="checkbox"] {
  padding: 0;
  outline: none;
  border: none;
  height: 32px;
  -webkit-appearance: none;
}
input[type="text"]::placeholder,
input[type="search"]::placeholder,
input[type="password"]::placeholder,
input[type="checkbox"]::placeholder {
  color: #ccc;
}
img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}
ul {
  list-style: none;
}
.container {
  width: 1240px;
  margin: 0 auto;
  position: relative;
}
.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
/* 进入的起点,离开的终点 */
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
/* 进入进行时,离开进行时 */
.fade-enter-active {
  transition: opacity 0.5s;
}
/* 进入的终点,离开的起点 */
.fade-enter-to,
.fade-leave {
  opacity: 1;
}
/* // 过渡动画 */
.viewer-fade-enter-active,
.viewer-fade-leave-active {
  transition: opacity 0.3s;
}

.viewer-fade-enter,
.viewer-fade-leave-to {
  opacity: 0;
}
/* 主背景色 */
.background {
  background-color: #348cf8 !important;
}
.primary-color {
  color: #348cf8 !important;
}

/* 主字体颜色 */
.color-back {
  color: #348cf8 !important;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-block;
  &:hover {
    transform: translateY(-2px);
    text-shadow: 0 1px 2px rgba(64, 158, 255, 0.3);
  }
  &:active {
    transform: translateY(0) scale(0.95);
    text-shadow: 0 0 1px rgba(64, 158, 255, 0.5);
  }
}
.primary-button {
  border-radius: 10px;
  background: linear-gradient(113deg, #348cf8 0%, #346ff8 100%) !important;
  color: #fff !important;
  border: none;
  padding: 12px 30px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
}

.primary-button:hover {
  background-color: #40a9ff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
/* 添加点击效果 */
.primary-button:active {
  /* 点击时轻微缩小，给用户按下的感觉 */
  transform: scale(0.98);
  /* 添加内阴影，模拟被按下去的效果 */
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}
.process-button {
  border-color: #1890ff;
  color: #1890ff;
  padding: 12px 16px;
  font-size: 16px;
  border-radius: 8px;
  background-color: transparent;
}

.process-button:hover {
  background-color: #1890ff;
  color: white;
}
.cancel-btn {
  border-color: #348cf8 !important;
  color: #348cf8 !important;
  border-radius: 10px;
  /* 阴影效果增强立体感 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}
.confirm-btn {
  background-color: #348cf8 !important;
  color: #fff !important;
  border: none !important;
  font-weight: 500 !important;
  border-radius: 10px;
  /* 阴影效果增强立体感 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}
/* 按钮悬停效果 */
.confirm-btn:hover,
.cancel-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
.hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
/* 按钮点击效果 */
.hover:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* 按钮点击效果 */
.confirm-btn:active,
.cancel-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.custom-btn {
  /* 移除Element UI默认样式 */
  background-color: #348cf8 !important;
  border: none !important;
  color: #fff !important;
  font-weight: 500 !important;
  /* 设置圆角 */
  border-radius: 20px !important;
  /* 阴影效果增强立体感 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}
/* 表格相关操作小按钮样式 */
.custom-btn.none {
  background-color: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  color: #348cf8 !important;
}
.custom-btn.none:hover {
  background-color: transparent !important;
}
/* 按钮悬停效果 */
.custom-btn:hover {
  background-color: #0050b3 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* 按钮点击效果 */
.custom-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* 主按钮样式 */
.carousel-btn {
  background-color: #348cf8;
  color: white;
  border: none;
  padding: 12px 16px;
  font-size: 16px;
  text-align: center;
  margin-right: 20px;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.3s ease;
  display: inline-block;
}
.carousel-btn.white:hover {
  background-color: white !important;
  color: #1890ff;
  border: 1px solid #1890ff;
}

.carousel-btn:hover {
  background-color: #40a9ff;
}

/* 立即咨询按钮样式 */
.consult-btn {
  background-color: white;
  color: #1890ff;
  border: 1px solid #1890ff;
}

.consult-btn:hover {
  background-color: #1890ff;
  color: #ffffff;
  border-color: #40a9ff;
}
.smill-btn-otherwidth {
  width: 40px !important;
  height: 27px !important;
  border-radius: 5px !important;
  opacity: 1;
  font-size: 12px !important;
  background: linear-gradient(
    294deg,
    #eeb465 0%,
    #fadab8 50%,
    #e7b58d 100%
  ) !important;
  box-sizing: border-box !important;
  border: 1px solid #dfab74 !important;
  box-shadow: inset 0px 4px 10px 0px #fbe7cd !important;
  line-height: 25px !important;
  text-align: center !important;
  color: #6e4430 !important;
}
.smill-btn {
  width: 64px !important;
  height: 27px !important;
  border-radius: 5px !important;
  opacity: 1;
  font-size: 12px !important;
  background: linear-gradient(
    294deg,
    #eeb465 0%,
    #fadab8 50%,
    #e7b58d 100%
  ) !important;
  box-sizing: border-box !important;
  border: 1px solid #dfab74 !important;
  box-shadow: inset 0px 4px 10px 0px #fbe7cd !important;
  cursor: pointer;
  line-height: 25px !important;
  text-align: center !important;
  font-variation-settings: "opsz" auto;
  font-feature-settings: "kern" on;
  color: #6e4430 !important;
  padding: 0 !important;
}
/* 悬停效果 */
.smill-btn:hover {
  /* 提升亮度和对比度 */
  background: linear-gradient(
    294deg,
    #f0c178 0%,
    #fbe6c0 50%,
    #f0c178 100%
  ) !important;
  /* 增强阴影 */
  box-shadow: inset 0px 4px 10px 0px #fbe7cd, 0 4px 8px rgba(238, 180, 101, 0.3) !important;
  /* 稍微上移 */
  transform: translateY(-1px);
  /* 增加边框亮度 */
  border-color: #f0c178 !important;
}
/* 点击放大效果 */
.smill-btn:active {
  /* 放大效果 */
  transform: scale(1.05);
  /* 点击时的背景变化 */
  background: linear-gradient(
    294deg,
    #e0a653 0%,
    #f8d1ab 50%,
    #e0a653 100%
  ) !important;
  /* 点击时的阴影变化 */
  box-shadow: inset 0px 2px 5px 0px #fbe7cd !important;
  /* 点击时的边框变化 */
  border-color: #d19952 !important;
}

.smill-btn-one {
  width: 64px !important;
  height: 27px !important;
  line-height: 23px;
  text-align: center;
  border-radius: 5px;
  opacity: 1;
  font-variation-settings: "opsz" auto;
  font-feature-settings: "kern" on;
  /* segmentedBgColorSelected */
  color: #ffffff !important;
  background: #348cf8 !important;
  font-size: 12px !important;
  box-sizing: border-box;
  /* 主色 */
  border: 1px solid #348cf8;
  /* 添加过渡效果 */
  transition: all 0.3s ease;
  /* 防止文字选中 */
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}
/* .smill-btn-one 悬停效果 */
.smill-btn-one:hover {
  /* 提升亮度 */
  background: #4a98f9 !important;
  /* 增强阴影 */
  box-shadow: 0 4px 8px rgba(52, 140, 248, 0.3);
  /* 稍微上移 */
  transform: translateY(-1px);
  /* 增加边框亮度 */
  border-color: #4a98f9;
}

/* .smill-btn-one 点击放大效果 */
.smill-btn-one:active {
  /* 放大效果 */
  transform: scale(1.05) translateY(-1px);
  /* 点击时的背景变化 */
  background: #2d7ce8 !important;
  /* 点击时的阴影变化 */
  box-shadow: 0 2px 4px rgba(52, 140, 248, 0.2);
  /* 点击时的边框变化 */
  border-color: #2d7ce8;
}
/* .smill-btn-one 禁用状态样式 */
.smill-btn-one:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  background: #a0c6f8 !important;
  border-color: #a0c6f8;
  color: #ffffff !important;
}
.smill-btn-two {
  width: 64px !important;
  height: 27px !important;
  border-radius: 5px;
  line-height: 23px;
  text-align: center;
  opacity: 1;
  font-size: 12px !important;
  font-weight: normal;
  line-height: normal;
  letter-spacing: 0px;
  font-variation-settings: "opsz" auto;
  font-feature-settings: "kern" on;
  /* 主色 */
  color: #348cf8 !important;
  box-sizing: border-box;
  /* 主色 */
  border: 1px solid #348cf8 !important;
  /* 添加过渡效果 */
  transition: all 0.3s ease;
  /* 防止文字选中 */
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  background: transparent;
}
/* .smill-btn-two 悬停效果 */
.smill-btn-two:hover {
  /* 背景色变化 */
  background: rgba(52, 140, 248, 0.08);
  /* 增强阴影 */
  box-shadow: 0 2px 4px rgba(52, 140, 248, 0.15);
  /* 稍微上移 */
  transform: translateY(-1px);
  /* 增加边框亮度 */
  border-color: #4a98f9 !important;
  color: #4a98f9 !important;
}

/* .smill-btn-two 点击放大效果 */
.smill-btn-two:active {
  /* 放大效果 */
  transform: scale(1.05) translateY(-1px);
  /* 点击时的背景变化 */
  background: rgba(52, 140, 248, 0.15);
  /* 点击时的边框变化 */
  border-color: #2d7ce8 !important;
  color: #2d7ce8 !important;
}

/* .smill-btn-two 禁用状态样式 */
.smill-btn-two:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  border-color: #a0c6f8 !important;
  color: #a0c6f8 !important;
  background: transparent;
}

.menu-item {
  font-size: 16px;
  padding: 0 20px;
  height: 60px;
  line-height: 60px;
  cursor: pointer;
  color: #333;
  position: relative;
  transition: color 0.3s ease;

  &:hover {
    color: #348cf8;
  }

  &.active {
    color: #348cf8;
    font-weight: bold;
  }
}
.menu-text {
  position: relative; /* 设置为相对定位，作为绝对定位元素的参考 */
  padding-bottom: 16px;
}

/* 使用伪元素::after为选中的菜单项添加下划线 */
.menu-item.active .menu-text::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% + 8px); /* 下划线宽度比文字稍宽 */
  height: 3px;
  background-color: #348cf8;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.color-348CF8 {
  color: #348cf8;
}
/* 立即购买按钮 */
.small-btn {
  background-color: #348cf8;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 5px;
  margin-right: 0;
  /* padding: 10px 20px; */
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.small-btn:hover {
  background-color: #2c7ad6;
  /* transform: translateY(-1px); */
  box-shadow: 0 2px 8px rgba(52, 140, 248, 0.3);
}
/* 自定义小按钮样式 - 统一背景色 */
.custom-btn.none-radius {
  border-radius: 10px !important;
  border-radius: 14px;
  opacity: 1;
  background: #348cf8;
  box-shadow: inset 0px 4px 10px 0px #92c3ff;
}
.custom-btn {
  /* 移除Element UI默认样式 */
  background-color: #348cf8 !important;
  border: none !important;
  color: #fff !important;
  font-weight: 500 !important;
  /* 设置圆角 */
  border-radius: 20px !important;
  /* 阴影效果增强立体感 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

/* 按钮悬停效果 */
.custom-btn:hover {
  background-color: #0050b3 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* 按钮点击效果 */
.custom-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.flex-between {
  display: flex;
  justify-content: space-between;
}
.flex-around {
  display: flex;
  justify-content: space-around;
}
.flex-evenly {
  display: flex;
  justify-content: space-evenly;
}
.flex-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flex-center {
  display: flex;
  align-items: center;
}
.bold {
  font-weight: bold;
}

.flex {
  display: flex;
}
.f10 {
  font-size: 10px;
}
.f11 {
  font-size: 11px;
}
.f12 {
  font-size: 12px !important;
}
.f13 {
  font-size: 13px;
}
.f16 {
  font-size: 16px;
}
.f17 {
  font-size: 17px;
}
.f18 {
  font-size: 18px;
}
.f19 {
  font-size: 19px;
}
.f20 {
  font-size: 20px;
}
.f21 {
  font-size: 21px;
}
.f22 {
  font-size: 22px;
}
.f23 {
  font-size: 23px;
}
.f24 {
  font-size: 24px;
}
.f25 {
  font-size: 25px;
}
.f28 {
  font-size: 28px;
}

/* 覆盖element表单默认样式 */
.form input {
  height: 32px !important;
  line-height: 32px !important;
}
.el-collapse .el-collapse-item__header .el-collapse-item__arrow::before {
  /* border: 2px solid blue !important;
  border-left-width: 6px !important;
  border-right-width: 6px !important;
  border-top-width: 7px !important; */
}
